<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <!--
        i.e: 2009-11-31 20:08:30
        It's inputs need to be html select boxes - ones for month, day, hour, 1/4 hour.
        -->
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Date/Time Picker</title>
        <script src="dateformat.js">
        </script>
        <script>
            function $(el){
                return document.getElementById(el);
            }
            
            function selectChanged(e){
                var d = getSelectedDateTime();
                var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
                var gmt = new Date(utc + (3600000 * 1)); //offset = 1?
                //yes I realize I don't have to multiply by 1, but it makes it easier to change to another offset later.
                try {
                    $("GMTDate").innerHTML = "GMT:&#0160;&#0160;" + gmt.format("isoDateTime").replace("T"," ");
                    $("localDate").innerHTML = "Local: " + getSelectedDateTime().format("isoDateTime").replace("T"," ");

                } 
                catch (e) {
                    $("GMTDate").innerHTML = "GMT:";
					$("localDate").innerHTML = "Local:";
                }
            }
            
            function getSelectedDateTime(){
                var selMonth = parseInt($("month").value);
                var selDay = parseInt($("day").value);
                var selHour = parseInt($("hour").value);
                var selMinutes = parseInt($("minutes").value);
                
                var newDate = new Date();
                newDate.setMonth(selMonth);
                newDate.setDate(selDay);
                newDate.setHours(selHour);
                newDate.setMinutes(selMinutes);
                
                return newDate;
            }
            
            function init(){
                for (var i = 0; i < 12; i++) {
                    $("month").add(new Option(dateFormat.i18n.monthNames[i], i), null);
                }
                
                for (var i = 0; i < 31; i++) {
                    $("day").add(new Option((i + 1).toString()), null);
                }
                for (var i = -1; i < 23; i++) {
                    $("hour").add(new Option((i + 1).toString(), i), null);
                }
                /* //Optionally calculate this programmatically
                 for(var i = 14; i < 59; i+=15) {
                 $("minutes").add(new Option((i +1).toString(), i), null);
                 }*/
                //////////////////////////////////////////////////////////////
                $("month").addEventListener("change", selectChanged, false);
                $("day").addEventListener("change", selectChanged, false);
                $("hour").addEventListener("change", selectChanged, false);
                $("minutes").addEventListener("change", selectChanged, false);
            }
        </script>
    </head>
    <body onload="init()">
    	<span id="localDate">Local:</span><br/>
        <span id="GMTDate">GMT:</span>
        <br/>
        <select id="day">
            <option>-</option>
        </select>
        <select id="month">
            <option>-</option>
        </select>&#0160;
        <select id="hour">
            <option>-</option>
        </select>:
        <select id="minutes">
            <option>00</option>
            <option>15</option>
            <option>30</option>
            <option>45</option>
        </select>
    </body>
</html>
